import React from 'react'
import {Switch} from "antd-mobile";
import PrettySlider from "./PrettySlider/PrettySlider";
import CustomButton from "../../../../../../../shared-components/CustomButton/CustomBotton";

const OnLiveHeaderFullScreenPretty = props => {

    const {
        setShowPretty,
    } = props

    const prettyTemplate = (
        <div>
            <div
                onClick={() => setShowPretty(false)}
                className='full-screen-mask'
                style={{zIndex: 3,}}
            />
            <div className='live-room-header-player-full-side' style={{width: '250px',}}>
                <div className='live-room-header-player-full-side-pretty'>
                    <div
                        className='flex-space-between-align-center'
                        style={{
                            marginBottom: '1.5rem',
                        }}
                    >
                        <p>开启美颜</p>
                        <Switch
                            checked={true}
                            color="#FA7268"
                        />
                    </div>
                    <PrettySlider title='磨皮'/>
                    <PrettySlider title='曝光'/>
                    <PrettySlider title='美白'/>
                    <PrettySlider title='饱和'/>
                    <div
                        style={{
                            width: '160px',
                            margin: '3rem auto'
                        }}
                    >
                        <CustomButton
                            size='large'
                            bg='transparent'
                            border='2px solid rgba(255,255,255,0.4)'
                        >重置</CustomButton>
                    </div>
                </div>
            </div>
        </div>
    )

    return prettyTemplate
}

export default OnLiveHeaderFullScreenPretty
